<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head th:replace="layouts/default :: head(~{this :: title}, ~{this :: link},~{this :: _})">
    <link th:href="@{/modules/mobile/css/mobile.css}"  rel="stylesheet"/>
</head>
<body class="d-flex flex-column min-vh-100">
	<div class="flex-grow-1 container mt-3 mb-5">
		<form th:action="@{/login}" method="post" class="needs-validation"
			novalidate>
			<div class="mb-3">
				<label for="mobile" class="form-label">手机号</label> <input type="tel"
					class="form-control" id="mobile" th:field="*{mobile}"
					pattern="[0-9]{11}" inputmode="numeric" required>
				<div class="invalid-feedback">请输入11位手机号</div>
			</div>

			<div class="mb-3">
				<label for="code" class="form-label">验证码</label>
				<div class="input-group">
					<input type="text" class="form-control" id="code"
						th:field="*{code}" required>
					<button class="btn btn-outline-secondary" type="button"
						id="sendCodeBtn">获取验证码</button>
				</div>
			</div>

			<button type="submit" class="btn btn-primary w-100 py-2">登录</button>
		</form>
	</div>
	<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
	<script th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/modules/mobile/js/mobile.js}"></script>
</body>

<footer th:replace="layouts/default::footer"></footer>
</html>